<!--
 * @Author: gsy gsy.36@163.com
 * @Date: 2022-11-12 10:05:54
 * @LastEditors: gsy gsy.36@163.com
 * @LastEditTime: 2022-11-12 12:24:02
 * @FilePath: \vite-web\src\components\index-intro-item.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE.
-->
<template>

    <div class="index-intro-item">
        <div class="index-intro-item-title">
            <div flex>
                {{ data.title }} <span class="index-intro-item-title-icon">校招</span>
            </div>
            <div class="index-intro-item-title-price">
                {{ data.price }}
            </div>
        </div>
        <div class="tags">
            <span v-for="i in data.tags" :key="i">{{ i }}</span>
        </div>
        <div class="company">
            <img src="/images/home/zhanwei/img_company_1.png" alt=""> {{ data.company }}
        </div>

    </div>

</template>
<script setup>
let { data } = defineProps(['data'])
console.log(data);
</script>
<style scoped lang="scss">
.index-intro-item {
    width: 380px;
    height: 140px;
    margin: 0 auto 14px;
    background: #FFFFFF;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.04);
    border-radius: 4px;
    border: 1px solid #EEEEEE;
    background-image: url('/images/home/img_new_company_di.png');
    background-repeat: no-repeat;
    background-size: 380px 48px;
    background-position: left bottom;
    padding-left: 20px;
    padding-top: 16px;
    padding-right: 20px;

    &-title {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        font-size: 16px;
        font-family: PingFang SC-Semibold, PingFang SC;
        font-weight: 600;
        color: #222222;
        line-height: 19px;
        justify-content: space-between;

        &-icon {
            width: 32px;
            height: 21px;
            background: #FFF4DF;
            color: #FF8933;
            font-size: 12px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            margin-left: 5px;

            justify-content: center;
        }

        &-price {

            color: #EB6353;
        }
    }

    .tags {
        span {
            padding: 0 10px;
            display: inline-block;
            height: 22px;
            background: #F8F8F8;
            border-radius: 4px;
            font-size: 13px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #777777;
            margin-right: 8px;
        }

    }

    .company {
        width: 380px;
        height: 48px;
        display: flex;
        align-items: center;
        margin-top: 15px;

        img {
            width: 24px;
            height: 24px;
            margin-right: 8px;
        }
    }
}
</style>